<!DOCTYPE html>
<html>
<head>
    <title>登录 | 米塔云平台管理系统</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="customize/css/login.css" rel="stylesheet"/>
</head>
<body>
<div id="lottie"></div>
<form class="login-content" id="loginForm">
    <div class="input-wrapper has-icon">
        <input class="login-input" type="text" name="username" id="username" placeholder="输入手机号">
        <span class="login-input-icon"><img src="customize/images/icon/login-icon1.png" alt=""></span>
    </div>
    <div class="input-wrapper has-icon">
        <input class="login-input" type="password" name="password" id="password" placeholder="输入密码"
               autocomplete="new-password">
        <span class="login-input-icon"><img src="customize/images/icon/login-icon2.png" alt=""></span>
    </div>
    <div class="input-wrapper">
        <input class="login-input" type="text" name="captcha" id="captcha" placeholder="输入验证码"
               style="padding-right: 120px;" autocomplete="off" maxlength="4">
        <span class="login-verif-code">
        <img id="captchaImg" src="../sys/captcha?" onClick="this.src=this.src+Math.random();" title="点击刷新"></span>
        </span>
    </div>
    <div class="button-wrapper" style="margin-bottom: 6px;">
        <button class="login-btn" type="submit"><img src="customize/images/login-btn-text.png" alt=""></button>
    </div>
    <div class="d-flex justify-content-between group-wrapper" style="padding: 0 10px">
        <a href="regist.html">注册账号</a>
        <a href="forgetPassword.html">忘记密码</a>
    </div>
</form>
</body>
<script src="plugins/jquery-3.4.1.min.js"></script>
<script src="plugins/alert.js"></script>
<script src="customize/js/loginAnimation.js"></script>
<script src="customize/js/CommonUtils.js"></script>
<script>
    var time = 0;
    $(function () {
        let isLogin = sessionStorage.getItem("isLogin");
        if (isLogin == 'true') {
            window.history.forward();
        }
        if (top.location.href != window.location.href) {
            top.location.href = "/index";
        }
        itemsResize();
    });

    /* 监测窗口大小改变 */
    var resizeWaiter = false;
    $(window).resize(function () {
        if (!resizeWaiter) {
            resizeWaiter = true;
            setTimeout(function () {
                itemsResize();
                resizeWaiter = false;
            }, 500);
        }
    });

    /* 根据窗口大小缩放、调整位置 */
    function itemsResize() {
        var content_width = $('.login-content').width();
        var body_width = document.documentElement.clientWidth;//获取页面可见宽度
        var body_height = document.documentElement.clientHeight;//获取页面可见高度
        var scale = body_width / 1920;
        var oright_height = 1080 * scale;//缩放后的容器实际高度
        var offset_y = (body_height - oright_height) / 2; //背景在非全屏下的纵向偏移修正
        $('#lottie').css({
            marginTop: offset_y
        })
        $('.login-content').css({
            transform: 'scale(' + scale + ')',
            transformOrigin: 'left top 0px',
            marginTop: offset_y * 0.3 //输入块在非全屏下的纵向偏移修正
        });
    }

    /* submit防抖 */
    var submitWaiter = false;
    $("#loginForm").on("submit", function (event) {
        event.preventDefault();
        if (!submitWaiter) {
            submitWaiter = true;
            setTimeout(function () {
                login();
                submitWaiter = false;
            }, 1000);
        }
    });

    function login() {
        if (time == 0) {
            time = 1; //设定间隔时间（秒）
            //启动计时器，倒计时time秒后自动关闭计时器。
            var index = setInterval(function () {
                time--;
                if (time == 0) {
                    clearInterval(index);
                }
            }, 1000);
            if (!$('#username').val()) {
                myAlert('提示', '手机号不能为空');
                return;
            }
            if (!$('#password').val()) {
                myAlert('提示', '密码不能为空');
                return;
            }
            if (!$('#captcha').val()) {
                myAlert('提示', '验证码不能为空');
                return;
            }
            /*  if($('#captcha').val()!=null || $('#captcha').val()!=""){
                  var captcha_get = getCaptchaValue();
                  if($('#captcha').val().toLowerCase()!= captcha_get.toLowerCase()){
                      myAlert('提示', '验证码错误');
                      return ;
                  }
              }*/
            let formData = $('#loginForm').serialize();
            getJson('/sys/login', formData, 'POST', function (data) {
                if (data['code'] == 200) {
                    sessionStorage.setItem("token", data['payload']['token']);
                    sessionStorage.setItem("isLogin", "true");
                    window.location.href = host + '/pages/index?token=' + data['payload']['token'];
//                window.location.href = data['payload']['target'];
                } else {
                    myAlert('提示', data['message'], function () {
                        getCaptcha();
                    })
                }
            });
        } else {
            return;
        }
        ;
    }

    function getCaptcha() {
        let img = $('#captchaImg');
        img.attr('src', host + '/sys/captcha?' + Math.random());
    }
</script>
</html>